<template>
  <div style="width: 70%;margin: 10px auto">
    <div style="text-align: center;font-size: 25px;margin-top:20px;margin-bottom: 20px">
      <el-page-header @back="$router.push('/front/home')" content="返回首页"></el-page-header>
    </div>
    <div style="margin-bottom: 10px">
      <el-input placeholder="请输入搜索内容" size="medium" style="width: 300px;margin-right: 10px" v-model="name"></el-input>
      <el-button type="primary" @click="loadGoods(1)">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>
    <el-row :gutter="15">
      <el-col :span="6" v-for="item in goodsList" :key="item.id">
        <div style="margin-bottom: 30px" class="goods-item" @click="$router.push('/front/goodsDetail?id=' + item.id)">
          <img :src="item.img" style="width: 100%; height: 260px; margin-top: 15px; border-radius: 5px" />
          <div style="font-size: 15px; height: 40px" class="line2 goods-name" :title="item.name">{{ item.name }}</div>
          <div style="display: flex; align-items: baseline; margin-top: 10px">
            <div style="font-size: 20px">￥<strong style="color: red;">{{ item.price }}</strong></div>
            <span style="font-size: 14px; margin-left: 10px; color: #666666">{{ item.readCount }}人浏览</span>
            <span style="font-size: 14px; margin-left: 20px; color: #666666">{{ item.likeCount }}点赞</span>
          </div>
        </div>
      </el-col>
      <div v-if="total === 0" style="text-align: center; margin-top: 50px"><el-empty description="暂无商品"></el-empty></div>
    </el-row>
    <div class="pagination" v-if="total>pageSize">
      <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[4, 8, 12]"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "Search",
  data(){
    return {
      goodsList: [], // 商品列表
      pageNum: 1, // 当前的页码
      pageSize: 8, // 每页显示的个数
      total: 0,
      name:this.$route.query.name
    }
  },
  mounted() {
    this.loadGoods(1)
  },
  methods: {
    handleCurrentChange(pageNum) {
      this.loadGoods(pageNum);
    },
    loadGoods(pageNum) { // 分页查询
      this.$request.get('/goods/selectFrontPage', {
        params: {
          pageNum: pageNum,
          pageSize: this.pageSize,
          name: this.name
        }
      }).then(res => {
        if (res.code === '200') {
          this.goodsList = res.data?.list;
          this.total = res.data?.total;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    reset(){
      this.name = null
      this.loadGoods(1)
    }
  }
}
</script>

<style scoped>

</style>